<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">

      <ion-button (click)="goback1()">
        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
      </ion-button>

      <!--<button on-press="doPress()">dian wo</button>-->
    </ion-buttons>
    <ion-title>
      觀賞VD    
    </ion-title>
 
    </ion-toolbar>

</ion-header>

<ion-content *ngIf="isVisble" >

  <ion-thumbnail class="">
    <!--<video src="http://10.84.111.205:21021/browse/UploadFile\aaa/中國.mp4" loop="loop" class="vd"
      controls="controls"></video>-->
      <video src={{videoUrl}} loop="loop" class="vd"
      controls="controls" ></video>
  </ion-thumbnail>
</ion-content>
<ion-content id="bbb" (swipedown)="doPressDown()"  (swipeleft)="doPressLeft()" (swiperight)="doPressRight()"   >
  <ion-grid (swipeup)="doPressUp()">
    <ion-row >
      <ion-col size="6">
        <ion-text><h3>{{videoName}}</h3> </ion-text>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="4">
         <ion-note color="primary" style="font-size: 12px;"><ion-icon  name="document-text-outline"></ion-icon>學分分值:(0) </ion-note> 
      </ion-col>
      <ion-col size="5">
        <ion-note color="success" style="font-size: 12px;"><ion-icon  name="eye-outline"></ion-icon>學習人數:(12541)</ion-note> 
      </ion-col>
      <ion-col size="3">
        <ion-note color="dark" style="font-size: 12px;"><ion-icon  name="heart-outline"></ion-icon>收藏課程</ion-note> 
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-segment [(ngModel)]="tabs" color="success">
    <ion-segment-button value="details" style="background-color: grey;">
      <ion-label>課程詳情</ion-label>
      </ion-segment-button>
    <ion-segment-button value="comments" style="background-color: khaki;">
      <ion-label>課程評論</ion-label>
      </ion-segment-button>
    <ion-segment-button value="notes" scrollable style="background-color: lightsalmon;" >
      <ion-label>課程筆記</ion-label>

      </ion-segment-button>
      </ion-segment>
</ion-content>
<ion-content >
  <ion-content>
    <div [ngSwitch]="tabs">
      <ion-list *ngSwitchCase="'details'">
        課程詳情页面
        <ion-item>
          <video #video1 class="vd" (timeupdate)="timeupdate()"
           id="video1" ></video>
        </ion-item>
      </ion-list>
    <div *ngSwitchCase="'comments'"> 
      課程評論页面
      <ion-list *ngFor="let item of vstudyDetailList" >
        <ion-item>
          <ion-thumbnail slot="end" *ngIf="item.filePath">
            <video #videoX [src]="fileUrl+folderName+item.fileName" loop="loop" height="100px" width="300px"
              controls="controls"></video>
          </ion-thumbnail>
          <ion-label>
            <h2 [ngStyle]="{'color':item.isRead?'gray':''}">{{item.displayName}}</h2>
    
            <div class="feedback label-inner">
              <div class="label-inner-content views">
                  <ion-icon class="news" name="eye"></ion-icon>
                  <span>{{item.sequenceNo}}</span>
              </div> 
              <p class="publish-time label-inner-note">{{item.createDate}}</p>
            </div>
          </ion-label>
        </ion-item>
      </ion-list>
      </div>

      <ion-list *ngSwitchCase="'notes'">
        課程筆記页面
        <ion-item>
          <video src={{videoUrl}} loop="loop" class="vd"
          controls="controls" id="video3" ></video>
        </ion-item>
      </ion-list>
    </div>
  </ion-content>

  
</ion-content>





